<template>
  <BasicContainer>
    <div id="map"></div>
  </BasicContainer>
</template>

<script>
// git remote add origin https://gitee.com/db121/map_tianditu.git
import BasicContainer from "@/components/BasicContainer";
const T = window.T;
export default {
  name: "Home",
  components: {
    BasicContainer,
  },
  data() {
    return {
      response: "",
    };
  },
  methods: {
    MarkerClick(e) {
      console.log(e);
    },
  },
  async mounted() {
    // const lay = new T.TileLayer({ minZoom: 6, maxZoom: 18 });
    // 	const lay2 = new T.TileLayer( { minZoom: 6, maxZoom: 18 });
    // 	var config = { layers: [lay, lay2] };
    //  var map=new T.Map('map',{
    //   //  Control:show()
    //  })
    //     //初始化地图
    //     // map.Control.show()
    // 		map.centerAndZoom(new T.LngLat(123.4972400,47.9183800), 16);
    this.map = new T.Map("map");
    //设置显示地图的中心点和级别
    this.map.centerAndZoom(new T.LngLat(116.40969, 39.9494), 15);
    //创建对象
    var ctrl = new T.Control.MapType();
    //添加控件
    this.map.addControl(ctrl);
    var points = [];
    points.push(new T.LngLat(116.41136, 39.97569));
    points.push(new T.LngLat(116.411794, 39.9068));
    points.push(new T.LngLat(116.32969, 39.9294));
    // points.push(new T.LngLat(116.385438, 39.90610));
    //创建面对象 color为线边颜色 fillColor为填充色
    var polygon = new T.Polygon(points, {
      color: "red",
      weight: 3,
      opacity: 0.5,
      fillColor: "#00a4f",
      fillOpacity: 0.5,
    });
    this.map.addEventListener("click", this.MarkerClick);//注册点击事件
    var center = new T.LngLat(116.63072, 40.054952);//注册打标地址
    var marker = new T.Marker(center); //
    this.map.addOverLay(marker);//插入打标地址
    var infoWin1 = new T.InfoWindow();//创建信息窗口
    //创建信息内容
    var sContent =
      "<div style='margin:0px;'>" +
      "<div style='margin:10px 10px; '>" +
      "<img style='float:left;margin:0px 10px' src='http://lbs.tianditu.gov.cn/images/logo.png' width='101' height='49' title='天安门'/>" +
      "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
      "</div>" +
      "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
      "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
      "</div>" +
      "</div>";
    infoWin1.setContent(sContent);//插入信息题窗
     this.map.openInfoWindow(infoWin1, center); //默认开启题窗和开启位置

    marker.addEventListener("click", function () {
      marker.openInfoWindow(infoWin1);
    }); //
    this.map.centerAndZoom(center, 15);
    //向地图上添加面
    this.map.addOverLay(polygon);
  },
};
</script>
<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
